<template>
  <div>
    <div class="font-27 font-w font-white mar-t-9">待提货</div>
    <div class="delivery-info-box mar-b-10 mar-t--9">
      <div class="bg-color-white panel-box">
        <!-- 门店配送-->
        <div class="panel-body pad-l-15 pad-r-15 pad-b-12 pad-t-12 bg-color-white" v-if="false">
          <div class="flex-col">
            <div class="flex flex-between">
              <div class="flex-col">
                <div class="address-info flex v-align-c">
                  <span class="address-tag mar-r-4 width-28 height-15 red-color font-11 flex flex-center">家</span>
                  <span class="font-color font-18 font-w">海西金融2601</span>
                </div>
                <span class="font-13 font-color-6">望远镜 13066332632</span>
              </div>
              <div class="font-18 red-color">
                <van-icon name="arrow" />
              </div>
            </div>
          </div>
        </div>
        <!-- 门店自提/社团-->
        <div class="panel-body pad-l-15 pad-r-15 pad-b-12 pad-t-12 bg-color-white">
          <div class="font-15 font-color">
            <div class="flex mar-b-8">
              <span class="font-w">提货人：</span>
              <span class="font-w">望远镜  12366633223</span>
            </div>
            <div class="flex flex-between mar-b-8">
              <div class="flex">
                <span class="font-w">提货点：</span>
                <span class="font-w">望小夏便利店</span>
              </div>
              <div class="flex v-align-c btn-box">
                <span class="height-14 v-line mar-r-6">|</span>
                <div class="flex v-align-c">
                  <img class="width-12 height-12" v-if="fileSpace" :src="fileSpace + '/images/phone-icon.png'" alt="">
                  <span class="font-15 mar-l-4">联系团长</span>
                </div>
              </div>
            </div>
            <div class="flex address-box">
              <div class="flex">
                <span class="font-w">地&nbsp;&nbsp;&nbsp;址：</span>
                <div class="width-149 text-align-j font-color-6">
                  福建省厦门市湖里区东黄路海西金融广场A栋5601
                </div>
              </div>
              <div class="flex v-align-c btn-box">
                <span class="height-14 v-line mar-r-6">|</span>
                <div class="flex v-align-c">
                  <img class="width-12 height-12" v-if="fileSpace" :src="fileSpace + '/images/phone-icon.png'" alt="">
                  <span class="font-15 mar-l-4">导航前往</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="prompt font-12 pad-t-10 pad-b-10 pad-l-15 flex v-align-c">
          <img v-if="fileSpace" class="width-13 height-13 mar-r-6" :src="fileSpace + '/images/save-icon.png'" alt="">
          <span>购物中如有问题，可联系客服，保障售后无忧</span>
        </div>
      </div>
    </div>
    <!-- 商品信息 -->
    <div class="goods-list-box pad-t-10 pad-l-16 pad-r-12 pad-b-1 mar-b-10">
      <div class="shop-name pad-b-13 mar-b-11">
        <span class="font-color font-16">乐海百货湖里万达店</span>
      </div>
      <div class="mar-b-18">
        <div v-for="(item, goodsIndex) of 2" :key="goodsIndex" class="mar-t-15">
          <div class="flex">
            <div class="goods-img-box mar-r-8">
              <img class="width-80 height-80" src="https://img-1.joinsun.vip/upload/96f1a034d133b004c437480329a7a658.jpg" alt="">
            </div>
            <div class="flex-col goods-box-right">
              <span class="_line-2 font-16 font-color font-w">眼球全网独家巧克色巧克色</span>
              <div class="flex goods-price-info">
                <div class="font-12 font-color-9 flex-col">
                  <div>
                    <span>￥8.26/件</span>
                    <span class="mar-l-13">共3件</span>
                  </div>
                  <div>
                    <span>4月14日 约15:00送达</span>
                  </div>
                </div>
                <span class="font-13 font-color retrun-btn flex flex-center width-56 height-25">
                  退货
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 总额 优惠卷 实付-->
      <div class="mar-b-10">
        <div class=" font-color flex flex-between mar-b-8">
          <span class="font-16">商品总额</span>
          <span class="font-19 font-w"><span class="font-16">￥</span>85.33</span>
        </div>
        <div class="flex coupon-box mar-b-15">
          <div class="flex v-align-c">
            <span class="coupon-tag width-16 height-16 font-12 flex flex-center">券</span>
            <span class="font-16 mar-l-3">优惠券</span>
          </div>
          <span class="font-19 font-w red-color"><span class="font-16">-￥</span>10.00</span>
        </div>
        <div  class="flex">
          <div style="margin-left:auto">
            <span class="font-16 font-color-9">实付:</span>
            <span class="font-16 font-color font-w">￥</span>
            <span class="font-26 font-color font-w">125.33</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 备注 -->
    <div class="remarks-box font-16 pad-t-11 pad-b-7 pad-l-15 flex pad-r-15 v-align-c">
      <span class="font-color">备注：</span>
      <input type="text" class="font-color-9 flex-item" placeholder="选填，填写您的特殊需求">
    </div>
    <!-- 订单信息 -->
    <div class="flex-col order-info-box pad-t-10 pad-l-15 pad-b-20 pad-r-15">
      <div class="mar-b-8 flex v-align-c">
        <span class="font-14 font-color-9">订单编号</span>
        <span class="mar-l-20">1222254564564546546</span>
        <span class="font-12 red-color width-37 height-18 flex flex-center copy-btn mar-l-20">复制</span>
      </div>
      <div class="font-14 mar-b-8">
        <span class="font-color-9">下单时间</span>
        <span class="font-color mar-l-20">2021-04-12 09:32:22</span>
      </div>
      <div class="font-14 mar-b-8">
        <span class="font-color-9">付款时间</span>
        <span class="font-color mar-l-20">2021-04-12 09:33:22</span>
      </div>
      <div class="font-14 mar-b-8">
        <span class="font-color-9">付款时间</span>
        <span class="font-color mar-l-20"></span>
      </div>
      <div class="font-14">
        <span class="font-color-9">完成时间</span>
        <span class="font-color mar-l-20"></span>
      </div>
    </div>
    <!-- 取消/取货码 -->
    <div class="btn-group-box flex pad-b-6 pad-l-15 pad-r-15 pad-t-9">
      <div class="cancle-btn flex flex-center mar-r-16">
        取消订单
      </div>
      <div class="get-code-btn flex flex-center" @click="getCode">
        取货码
      </div>
    </div>

    <!-- 二维码 -->
    <div class="code-box">
      <van-popup :round="true" :show="showCodeAlert" @close="showCodeAlert = false">
        <div class="width-300">
          <!-- 社区团购 -->
          <div class="width-300 height-127 alert-bg pad-t-5 text-align-c" v-if="groupBuy">
            <span class="font-21 font-white font-w">{{appName}}</span>
            <div class="font-12 font-white flex mar-t-1">
              <span class="flex subject" style="margin-left:41px"><span class="dots"></span>货源直采</span>
              <span class="flex subject mar-l-28"><span class="dots"></span>品质保证</span>
              <span class="flex subject mar-l-27"><span class="dots"></span>便宜省心</span>
            </div>
          </div>
          <!-- 门店自提 -->
          <div v-else class="flex-col flex-center mar-t-18">
            <span class="font-15 font-color font-w mar-b-17">请向商家出示提货码</span>
            <img v-if="fileSpace" class="width-275 height-67" :src="fileSpace + '/images/test-code.png'" alt="">
          </div>
          <div class="width-275 height-283 code-area flex flex-center" :style="{top: groupBuy ? '-57px':'15px'}">
            <img class="width-per-100" src="https://img-1.joinsun.vip/upload/80e8213f1176c62654f1d8fbcf9a1c10.png" alt="">
          </div>
          <div v-if="groupBuy" class="font-15 font-color text-align-c remark-text font-w">
            <span>请向团长展示此二维码</span>
          </div>
          <div v-else class="font-15 font-color text-align-c font-w mar-b-20" style="margin-top:34px">
            <span>请向店主展示此二维码</span>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      groupBuy: true, // 是否是社区团购
      showCodeAlert: false,
      appName: ''
    }
  },
  onReady() {
    let getAppInfo = this.$pt.getStorageSync('appInfo')
    this.appName = getAppInfo.appName
  },
  mounted() {
    let getAppInfo = this.$pt.getStorageSync('appInfo')
    this.appName = getAppInfo.appName
  },
  methods: {
    // 获取二维码
    getCode() {
      this.showCodeAlert = true
    }
  }
}
</script>

<style lang="less" scoped>
  .delivery-info-box {
    background: #fff;
    position: relative;
    margin-top: 12px;
    border-radius: 10px;
    .panel-box {
      border-radius: 10px;
      .panel-body {
        border-radius: 10px;
        box-shadow: 0px 1px 1px rgba(195, 195, 195, 0.22);
        .address-info {
          .address-tag {
            background: rgba(255,36,61,0.16);
            border-radius: 3px;
          }
        }
        .self-address-info {
          justify-content: space-between;
        }
        .address-box {
          justify-content: space-between;
          align-items: flex-start;
        }
        .btn-box {
          color: #0376FF;
          .v-line {
            overflow: hidden;
            font-size: 12px;
            color: #c5c5c5;
            position: relative;
            top: -2px;
          }
        }
      }
    }
    .prompt {
      color: #A68589;
      border-radius: 0px 0px 10px 10px;
      box-sizing: border-box;
    }
  }
  .goods-list-box {
    background: #fff;
    border-radius: 10px;
    .shop-name {
      border-bottom: 0.5px solid #f5f5f5;
    }
    .goods-img-box {
      img {
        border-radius: 10px;
      }
    }
    .goods-box-right {
      justify-content: space-between;
      flex: 1;
      .goods-price-info {
        justify-content: space-between;
        align-items: flex-end;
        .retrun-btn {
          border: 1px solid #E3E3E3;
          border-radius: 13px;
        }
      }
    }
    .coupon-box {
      justify-content: space-between;
      .coupon-tag {
        background: #FF243D;
        color: #fff;
        border-radius: 2px;
      }
    }
  }
  .order-info-box {
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    margin-bottom: 68px;
    .copy-btn {
      border: 1px solid #FF243D;
      border-radius: 9px;
    }
  }
  .remarks-box {
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
  }
  .red-color {
    color: #FF243D;
  }
  .gray-bg-color {
    background: #F5F5F5;
  }
  .btn-group-box {
    background: #fff;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    box-sizing: border-box;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    justify-content: flex-end;
    .cancle-btn {
      color: #FF243D;
      background: #fff;
      width: 112px;
      height: 38px;
      border-radius: 19px;
      border: 1px solid #FF243D;
    }
    .get-code-btn {
      color: #fff;
      background: #FF243D;
      width: 112px;
      height: 38px;
      border-radius: 19px;
    }
  }
  .code-box {
    .alert-bg {
      background: #FF243D;
      border-radius:0px 0px 10px 10px;
    }
    .subject {
      align-items: center;
      .dots {
        margin-right: 4px;
        width: 4px;
        height: 4px;
        background: #fff;
        border-radius: 50%;
      }
    }
    .code-area {
      background: #fff;
      border-radius: 10px;
      position: relative;
      z-index: 10;
      // top: -57px;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0px 1px 11px 0px rgba(255, 139, 152, 0.31);
    }
    .remark-text {
      margin-top: -35px;
      margin-bottom: 19px;
    }
  }
  ._line-2{
    line-height: 1.4;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    word-break:break-word;
  }
</style>